<template>
  <div class="profile">
    <!-- 头像 -->
    <div class="avatar-container">
      <img :src="user.avatar" alt="User Avatar" class="avatar" />
    </div>

    <!-- 用户名 -->
    <h2 class="username">{{ user.name }}</h2>

    <!-- 按钮 -->
    <div class="button-container">
      <button @click="logout" class="button">退出登录</button>
      <button @click="changePassword" class="button">修改密码</button>
    </div>

    <!-- Gitee 仓库地址链接 -->
    <div class="gitee-link">
      <a href="https://gitee.com/li-3179/vue3.git" target="_blank" class="link">访问 Gitee 仓库</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 用户信息数据
const user = ref({
  avatar: 'src/assets/11.jpg', // 替换为实际的头像 URL
  name: '殇之戀'
});

// 退出登录按钮点击事件
const logout = () => {
  // 实现退出登录逻辑
  console.log('退出登录');
};

// 修改密码按钮点击事件
const changePassword = () => {
  // 实现修改密码逻辑
  console.log('修改密码');
};
</script>

<style scoped>
.profile {
  text-align: center;
  padding: 20px;
}

.avatar-container {
  margin-bottom: 20px;
}

.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-size: 24px;
  margin: 20px 0;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.button {
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #357ae8;
}

/* Gitee 仓库地址链接样式 */
.gitee-link {
  margin-top: 20px;
}

.link {
  color: #4a90e2;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.link:hover {
  color: #357ae8;
}
</style>